<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>问卷统计列表</title>
		<link rel="stylesheet" href="../../lib/element-ui/theme-chalk/index.css">
		<link rel="stylesheet" href="../../lib/vxe-table/index.css">
		<link rel="stylesheet" href="../../lib/vxe-table-plugin-element/style.css">
		<link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.min.css">
		<script type="text/javascript" src="../../lib/vue/vue.js"></script>
		<script type="text/javascript" src="../../lib/xe-utils/xe-utils.js"></script>
		<script type="text/javascript" src="../../lib/element-ui/index.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table/index.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table-plugin-element/index.js"></script>
		<script type="text/javascript" src="../../lib/xlsx/xlsx.full.min.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table-plugin-export-xlsx/index.min.js"></script>
		<script type="text/javascript" src="../../lib/xe-ajax/xe-ajax.js"></script>
		<script type="text/javascript" src="../../static/js/jquery.min.js"></script>
		<script type="text/javascript" src="../../static/js/webApi.js"></script>
		<script type="text/javascript" src="../../static/js/tool.js"></script>
		<style type="text/css">
			/*
		        找到html标签、body标签，和挂载的标签
		        都给他们统一设置样式
		    */
			html,
			body,
			#app,
			.el-container {
				/*设置内部填充为0，几个布局元素之间没有间距*/
				padding: 0px;
				/*外部间距也是如此设置*/
				margin: 0px;
				/*统一设置高度为100%*/
				height: 100%;
			}

			.el-main {
				padding: 4px;
			}
		</style>
	</head>
	<body>
		<el-container id="app">
			<el-main>
				<el-form :inline="true" :model="queryData" ref="queryData" label-width="80px" label-position="right"
					size="mini" style="height: 35px;border: 1px solid #e8eaec;">
					<el-form-item label="小区名称">
						<el-input placeholder="请输入小区名称" v-model="queryData.areaName">
						</el-input>
					</el-form-item>
					<el-form-item label="问卷名称">
						<el-input placeholder="请输入区划编码" v-model="queryData.paperName">
						</el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="searchEvent">查询
						</el-button>
						<el-button @click="reset">重置</el-button>
					</el-form-item>
				</el-form>
				<vxe-grid border ref="xGrid" resizable show-overflow highlight-hover-row highlight-current-row
					keep-source :height="tableHeight" size="mini" :data="tableData"
					:edit-config="{trigger:'click', mode:'row'}" :radio-config="{labelField: 'name', trigger: 'row'}"
					:header-cell-style="{'text-align':'center'}">
					<vxe-table-column type="radio" width="50" headerAlign="center" align="center">
					</vxe-table-column>
					<vxe-table-column field="areaName" title="小区名称" width="200" headerAlign="center" align="center">
					</vxe-table-column>
					<vxe-table-column field="orgName" title="所属社区" width="120" headerAlign="center" align="center">
					</vxe-table-column>
					<vxe-table-column field="paperName" title="问卷名称" width="400" headerAlign="center" align="center">
					</vxe-table-column>
					<vxe-table-column field="wyCompanyName" title="所属物业" width="400" headerAlign="center"
						align="center">
					</vxe-table-column>
					</vxe-table-column>
					<vxe-table-column title="操作" width="180" headerAlign="center" align="center" show-overflow
						fixed="right">
						<template v-slot="{ row }">
							<vxe-button v-if="row.orgCode!= '01'" type="text" icon="fa fa-edit vxe-primary-color"
								@click="editEvent(row)" title="查看统计"></vxe-button>
						</template>
					</vxe-table-column>
				</vxe-grid>

				<vxe-pager style="margin-bottom: 20px;padding-top: 10px;" background :page-size.sync="pageSizeHouse"
					:current-page.sync="currentPageHouse" :total="totalSize" @page-change="handleCurrentChange"
					size="mini"
					:layouts="['Sizes','PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump','FullJump', 'Total']">
				</vxe-pager>
			</el-main>
		</el-container>
	</body>

	<script type="text/javascript">
		window.onload = function() {
			var main = {
				data() {
					return {
						tableData: [],
						tableHeight: 500,
						pageSizeHouse: 10, //每页显示的条数
						currentPageHouse: 1, //当前第几页
						totalSize: 0, //总页数
						queryData: {
							areaName: '',
							paperName: ''
						},
					}
				},
				created() {
					this.getXqWyQuery()
				},
				mounted() {
					this.tableHeight = window.innerHeight - this.$refs.xGrid.$el.offsetTop - 75;
				},
				methods: {
					getXqWyQuery() {
						this.tableData = []
						XEAjax.post(`${curlFinance}/wenjuan/ExamPaperTjTable?`, {
							"currentPage": this.currentPageHouse,
							"pageSize": this.pageSizeHouse,
							"type": "",
							"paperName": this.queryData.paperName,
							"areaName": this.queryData.areaName,
						}).then(res => {
							if (res.code == 200) {
								this.tableData = res.data.rows
								this.totalSize = res.data.total
							} else {
								this.$message({
									message: res.msg,
									type: 'error'
								})
							}
						});
					},
					formatDate({
						cellValue
					}) {
						return XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:MM:ss')
					},
					handleCurrentChange(e) {
						this.currentPageHouse = e.currentPage
						this.pageSizeHouse = e.pageSize
						this.getXqWyQuery()
					},
					searchEvent() {
						this.getXqWyQuery()
					},
					reset() {
						this.queryData = {
							areaName: '',
							admDvs: ''
						}
						setTimeout(() => {
							this.getXqWyQuery()
						}, 300)
					},
					editEvent(row) {
						setTimeout(() => {
							Tool.openTabEvent('../question/wenjuanStatistics.html', '问卷统计', {
								'id': row.id
							})
						}, 300)
					}
				}
			};
			var vue = Vue.extend(main);
			new vue().$mount('#app');
		}
	</script>
</html>
